<template>
  <div>
    <div class="werapp">
      <h1>商品管理--添加商品</h1>
      <div class="box-item">
        <p>
          <b>商品名称：</b
          ><el-input
            type="text"
            v-model="model.name"
            placeholder="请输入商品名称"
            class="box-name"
          />
        </p>
        <p>
          <b>商品描述：</b
          ><el-input
            type="text"
            v-model="model.subtitle"
            placeholder="请输入商品描述"
            class="box-name"
          />
        </p>
        <p>
          <b>所有分类：</b>
          <el-select v-model="model.categoryId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </p>
        <p>
          <b>商品价格：</b
          ><el-input
            type="number"
            v-model="model.price"
            placeholder="价格"
            class="box-price"
          >
            <el-button slot="append">元</el-button>
          </el-input>
        </p>
        <p>
          <b>商品库存：</b
          ><el-input
            type="number"
            v-model="model.stock"
            placeholder="库存"
            class="box-price"
          >
            <el-button slot="append">元</el-button>
          </el-input>
        </p>
        <p>
          <b>商品图片：</b>请上传图片
          <img :src="model.subImages" class="imgI" alt="" />
          <el-upload
            class="upload-demo"
            name="upload_file"
            multiple
            :limit="3"
            action="/api/product/upload.do"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatarUpload"
          >
            <!-- <img
                class="image"
                :src="model.imageHost + model.subImages"
                alt=""
              /> -->
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </p>
        <p>
          <b>商品详情：</b>
          <quill-editor
            v-model="model.detail"
            :options="editorOption"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </p>
        <el-button type="primary" @click="adddata">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { addsave, updatesave, Pcategory } from "../../api/index";
export default {
  data() {
    return {
      value: "",
      model: {},
      editorOption: {},
      options: [],
    };
  },
  methods: {
    // 上传图片
    handlePreview(file) {
      console.log(file);
      // 相对地址
      this.model.subImages = file.response.data.url;
    },
    beforeRemove(file, fileList) {
      console.log(file, fileList);
      return this.$confirm(`确定删除${file.name}`);
    },
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.model.subImages = file.response.data.url;
    },
    handleExceed(files, fileList) {
      console.log(files);
      this.$message.warning(
        `当前限制选择3个文件，本次选择了${files.length}个文件,共选择了${
          files.length + fileList.length
        }个文件`
      );
    },
    // 限制图片类型及大小
    beforeAvatarUpload(file) {
      console.log(file);
      console.log(file.name);
      // 原生js能力   msg文件的后缀名
      let msg = file.name.substring(file.name.indexOf(".") + 1);
      // console.log(msg)
      const extension = msg === "jpg";
      const extension2 = msg === "png";
      // 2M  size 文件的大小
      const size = file.size / 1024 / 1024;
      console.log(size);

      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 jpg、png格式",
          type: "warning",
        });
      }
      if (size >= 2) {
        this.$message({
          message: "上传文件大小不能超过2MB！",
          type: "warning",
        });
        return;
      }

      return extension || extension2;
    },
    onEditorChange(v) {
      console.log(v.text);
      this.model.detail = v.text;
    },
    adddata() {
      // console.log(this.options);
      this.model = {
        categoryId: this.model.categoryId,
        name: this.model.name,
        subtitle: this.model.subtitle,
        subImages: this.model.subImages,
        detail: this.model.detail,
        price: this.model.price,
        stock: this.model.stock,
        status: 1,
      };
      console.log(this.model);
      addsave(
      //  { 
      //   categoryId: 100063,
      //   name: 123,
      //   subtitle: 11111111,
      //   subImages: "",
      //   detail: 1111,
      //   price: 111,
      //   stock: 11111111,
      //   status: 1,
      //   }
        this.model
      )
        .then((res) => {
          console.log(res);
          if(res.status!=0){
            return alert("内容不能为空")
          }else{
            alert(res.data)
            this.$router.push("/product/index/indexs")
          }
        })
        // .catch((e) => {
        //   console.log(e);
        // });
    },
  },
  created() {
    // this.model = {
    //     categoryId: res.data.data.categoryId,
    //     name: res.data.data.name,
    //     subtitle: res.data.data.subtitle,
    //     stock: res.data.data.stock,
    //     imageHost: res.data.data.imageHost,
    //     subImages: res.data.data.subImages,
    //     detail: res.data.data.detail,
    //     price: res.data.data.price,
    //     status: res.data.data.status,
    //     id: res.data.data.id,
    // };

    // this.adddata();
    Pcategory().then((res) => {
      console.log(res);
      this.options = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  padding: 15px 30px;
  h1 {
    font-size: 36px;
  }
  .box-item {
    .box-name {
      width: 300px;
      padding: 10px 0;
    }
    .box-price {
      width: 150px;
      padding: 10px 0;
    }
  }
}
</style>